<script setup lang="ts">
// 引入必要的库和组件
import { ref } from 'vue'; // Vue 3 的 ref 函数用于创建响应式数据
import axios from '../api/request.ts'; // Axios 是用于发起 HTTP 请求的库
import { useRouter } from 'vue-router'; // Vue Router的钩子函数，用于程序性导航
import { useUserStore } from '../stores/user'; // 自定义的 user store，用于状态管理
// 引入 UI 组件库 Ant Design Vue 的组件
import { message, Form as aForm, FormItem as aFormItem, Input as aInput, Upload as aUpload, Button as aButton, Textarea as aTextarea } from 'ant-design-vue';

// 创建响应式数据变量
const router = useRouter(); // 引入 Vue Router
const userStore = useUserStore(); // 引入 user store

// 引入活动的相关数据
const name = ref('');
const time = ref('');
const location = ref('');
const content = ref('');
const xuefen = ref('');
const imageUrls = ref(new Array());
// 创建活动的方法
const createActivity = async () => {
	let fileUrls = '';
	for (var i = 0; i < imageUrls.value.length; i++) {
		fileUrls = fileUrls + 'http://localhost:8080/' + imageUrls.value[i] + ';'
	}
	fileUrls = fileUrls.substring(0,fileUrls.length-1)
	console.log('fileurls:',fileUrls)
  const activityData = {
    name: name.value,
    time: time.value,
    location: location.value,
    content: content.value,
    organizerId: userStore.userId,
	imageUrls: fileUrls,
	xuefen: xuefen.value,
    reviewStatus: 'approved'
  };
  console.log('发送的活动数据:', activityData);

  try {
    // 发起 POST 请求，创建活动
    const response = await axios.post('/activities/create', activityData);
    // 请求成功后显示成功信息
    console.log('服务器响应:', response.data);
    message.success('活动创建成功');
    // 导航到活动列表页
    router.push('/activities');
  } catch (error) {
    // 如果请求失败打印错误信息并显示失败消息
    console.error('创建活动时出错:', error);
    message.error('活动创建失败');
  }
};

function beforeUpload(file) {
  const isLt2M = file.size / 1024 / 1024 < 10;
  if (!isLt2M) {
    message.error('文件不能超过10MB!');//限制文件的大小为不能超过10M
  }
  return isLt2M;
}
const loading = ref(false);
const handleChange = async (info) => {
	console.log('info:',info)
	if (info.file.status === 'uploading') {
		loading.value = true;
		return;
	}
	if (info.file.status === 'done') {
		const fileList = info.fileList
		console.log('fileurls:',fileList)
		if(fileList){
			var files = new Array();
			for (var i = 0; i < fileList.length; i++) {
				files.push(fileList[i].response)
			}
			imageUrls.value = files;
		}
		loading.value = false;
	}
	if (info.file.status === 'removd') {
		const fileList = info.fileList
		console.log('fileurlsremovd:',fileList)
		if(fileList){
			var files = new Array();
			for (var i = 0; i < fileList.length; i++) {
				files.push(fileList[i].response)
			}
			imageUrls.value = files;
		}
		loading.value = false;
	}
}
const headers = {
	
}
</script>

<template>
  <div class="container">
    <!-- 创建活动的表单 -->
    <div class="box">
      <h1 style="width: 500px;">创建活动</h1>
      <!-- 使用 Ant Design Vue 的表单组件，表单提交时调用 createActivity 方法 -->
      <a-form @submit.prevent="createActivity" class="form">
        <a-form-item label="活动名称">
          <a-input v-model:value="name" class="inputClass"/>
        </a-form-item>
        <a-form-item label="活动时间">
          <a-input v-model:value="time"  class="inputClass"/>
        </a-form-item>
        <a-form-item label="活动地点">
          <a-input v-model:value="location"  class="inputClass"/>
        </a-form-item>
		<a-form-item label="活动学分">
		  <a-input-number v-model:value="xuefen"  class="inputClass"/>
		</a-form-item>
		<a-form-item label="活动图片">
		  <a-upload
			  name="file"
			  list-type="picture-card"
			  class="image-uploader"
			  :headers="headers"
			  action="http://localhost:8080/uploads/file"
			  @change="handleChange"
			>
			  <div>
				<a-icon :type="loading ? 'loading' : 'plus'" />
				<div class="ant-upload-text">上传图片</div>
			  </div>
		  </a-upload>
		</a-form-item>
        <a-form-item label="活动内容">
          <a-textarea v-model:value="content" style="height: 100px;" class="inputClass"></a-textarea>
        </a-form-item>
        <!-- 提交按钮 -->
        <a-form-item class="form-item-centered">
          <a-button type="primary" html-type="submit">创建活动</a-button>
        </a-form-item>
<!--        <a-form-item class="form-item-centered">-->
<!--          <a-button  @click="goBack">返回主页</a-button>-->
<!--        </a-form-item>-->
      </a-form>
    </div>
  </div>
</template>

<style scoped>
/* 容器用于整个登录部分，水平和垂直居中内容 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  //align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 占满整个视口高度 */
  //background-color: #f0f2f5; /* 可选：浅背景颜色 */
}

/* 包含表单和标题的背景框 */
.box {
  //padding: 20px;           /* 框内填充 */
  //background-color: white; /* 框的白色背景 */
  //border-radius: 8px;      /* 圆角 */
  //box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 微妙的阴影增加深度 */
  width: 100%;
  //max-width: 640px;        /* 框的最大宽度 */
}

/* 框内的表单 */
.form {
  width: 500px;            /* 占满框的全宽 */
}

/* 自定义类以在表单项内居中按钮和链接 */
.form-item-centered {
  display: flex;           /* 使用flexbox进行对齐 */
  flex-direction: column;  /* 垂直堆叠子元素 */
  align-items: center;     /* 水平居中子元素 */
}
.inputClass{
	width: 400px;
}
/* 全宽按钮，带有下方的间距 */
a-button {
  width: 100%;             /* 占满表单项的全宽 */
  margin-bottom: 10px;     /* 按钮下方的间距 */
}


h1 {
  text-align: center;
}

</style>
